<?php $today=getdate();
  	  if(isset($_GET['from'])) $from=date('Y-m-d',strtotime($_GET['from']));
	  else $from=$today['year']."-".$today['mon'].'-'.$today['mday'];?>
<style>
li {
	list-style:disc!important;
}
li img.active {
	box-shadow:0 0 10px #fff;
}
ul {
width:<?php echo (92*count($banner))+10 ?>px;
}
#boxpolicy ul{float:left;width:622px;padding-left:40px;}
#boxpolicy ul li{text-align:justify;}
</style>
<?php if(count($banner)>0){?>
<div class="mgb40 h380 dis_blk" id="boxbannerslide">
  <div class="boxbanner <?php if(strlen($data['title'])>=26) echo "w450";else if(strlen($data['title'])>16 && strlen($data['title'])<26) echo "w427";else echo "w350"?> pdt12 fr pdb12 pdl20 pdr20 mgt32 white">
    <h1 class="ff_museo700 mgt0 f30 mgb0"><?php echo $data['title'] ?></h1>
    <p class="mgt0 mgb5"><?php echo $data['description'] ?></p>
    <strong class="orange2 ff_museo700 lighter f14">from <span class="f18">$<?php echo $data['price'] ?></span></strong> </div>
  <div class="boxbanner w152 pdt3 fr pdb3 pdl20 pdr20 mgt180 white"><a href="javascript:void(0);" id="overview" class="fl ff_museo300 white f18">Overview</a> </div>
  <div class="boxbanner w152 pdt3 fr pdb3 pdl20 pdr20 mgt212 white"><a href="javascript:void(0);" id="itinerary" class="fl ff_museo300 white f18">Itinerary</a> </div>
  <div class="boxbanner w152 pdt3 fr pdb3 pdl20 pdr20 mgt244 white"><a href="javascript:void(0);" id="policy" class="fl ff_museo300 white f18">Price & Policies</a> </div>
  <div class="boxbanner w152 pdt3 fr pdb3 pdl20 pdr20 mgt276 white"><a href="javascript:void(0);" id="review" class="fl ff_museo300 white f18">Guest's review</a> </div>
  <script>
	$('#overview').click(function(){		
		$('html, body').animate({scrollTop:300}, 1000);
		$('#boxitinerary').slideUp(1000);
		$('#imgitinerary').addClass('mgt3 mgr14 tran_180deg');
		$('#boxoverview').slideDown(1000);
		$('#imgoverview').removeClass('mgt3 mgr14 tran_180deg');
		$('#boxpolicy').slideUp(1000);
		$('#imgpolicy').addClass('mgt3 mgr14 tran_180deg');
		$('#boxguestreview').slideUp(1000);
		$('#imgguestreview').addClass('mgt3 mgr14 tran_180deg');
	})
	$('#itinerary').click(function(){		
		$('html, body').animate({scrollTop:350}, 1000);
		$('#boxitinerary').slideDown(1000);
		$('#imgitinerary').removeClass('mgt3 mgr14 tran_180deg');
		$('#boxoverview').slideUp(1000);
		$('#imgoverview').addClass('mgt3 mgr14 tran_180deg');
		$('#boxpolicy').slideUp(1000);
		$('#imgpolicy').addClass('mgt3 mgr14 tran_180deg');
		$('#boxguestreview').slideUp(1000);
		$('#imgguestreview').addClass('mgt3 mgr14 tran_180deg');
	})
	$('#policy').click(function(){		
		$('html, body').animate({scrollTop:400}, 1000);
		$('#boxitinerary').slideUp(1000);
		$('#imgitinerary').addClass('mgt3 mgr14 tran_180deg');
		$('#boxoverview').slideUp(1000);
		$('#imgoverview').addClass('mgt3 mgr14 tran_180deg');
		$('#boxpolicy').slideDown(1000);
		$('#imgpolicy').removeClass('mgt3 mgr14 tran_180deg');
		$('#boxguestreview').slideUp(1000);
		$('#imgguestreview').addClass('mgt3 mgr14 tran_180deg');
	})
	$('#review').click(function(){		
		$('html, body').animate({scrollTop:450}, 1000);
		$('#boxitinerary').slideUp(1000);
		$('#imgitinerary').addClass('mgt3 mgr14 tran_180deg');
		$('#boxoverview').slideUp(1000);
		$('#imgoverview').addClass('mgt3 mgr14 tran_180deg');
		$('#boxpolicy').slideUp(1000);
		$('#imgpolicy').addClass('mgt3 mgr14 tran_180deg');
		$('#boxguestreview').slideDown(1000);
		$('#imgguestreview').removeClass('mgt3 mgr14 tran_180deg');
	})
  </script>
  <?php foreach($banner as $k=>$list){?>
  <img width="886" height="380" class="fl pst_relative" style="float:left;" id="imgbigslide<?php echo $k ?>" src="<?php echo base_url(); ?>uploads/packagebanner/<?php echo $list['avatar']; ?>">
  <?php }?>
  <div class="item mgt-73 h62"> <a href="javascript:void(0);" id="leftclick" onclick="leftclick(<?php echo count($banner) ?>)" style="width:20px;height:100%;background:url(<?php echo base_url(); ?>public/images/Scroll%20Icon-04.png) center center no-repeat;" class="fl pst_relative mgr-20 mgt5">&nbsp;</a>
    <div class="fl w845 pst_relative ov_fl_hidden mgl20">
      <ul class="fl ov_fl_hidden pst_relative zindex11 pdt10 h62" id="boximgsmall">
        <?php
			foreach($banner as $k=>$list){?>
        <li style="list-style:none!important;" class="fl"> <img width="71" id="imgsmallslide<?php echo $k ?>" onclick="slidebannerhotel(<?php echo $k ?>,<?php echo count($banner) ?>);" height="55" class="fl mgl21 mgb10 <?php if($k==0) echo "active";?>" src="<?php echo base_url(); ?>uploads/packagebanner/<?php echo $list['avatar']; ?>"></li>
        <?php }?>
      </ul>
    </div>
    <a href="javascript:void(0);" id="rightclick" onclick="rightclick(<?php echo count($banner) ?>);" style="width:20px;height:100%;background:url(<?php echo base_url(); ?>public/images/Scroll%20Icon-04.png) center center no-repeat;" class="fr pst_relative tran_180deg mgt5">&nbsp;</a> </div>
</div>
<script>
	var total=<?php echo count($banner) ?>;
	$(document).ready(function(){
		$('#boximgsmall').animate({width:92*i+'px'});
		for(var i=1;i<total;i++){
			$("#imgbigslide"+i).css({display:'none'}).animate({marginTop: '-380px',opacity:0});	
			$("#imgsmallslide"+i).addClass('opa05 cursor_poiter');
		}		
		if(total<=9){
			$('#leftclick').hide();	
			$('#rightclick').hide();
		}
	});
	var oldi=0;
	var num=0;
	function slidebannerhotel(numberimg,totalimg){
		for(var i=0;i<totalimg;i++){			
			if(i==numberimg){
				$('#imgsmallslide'+numberimg).removeClass('opa05 cursor_poiter',1000).addClass('active');
				$('#imgbigslide'+numberimg).css({display:'block'}).animate({opacity:1},1000);
			}else if(i==oldi){
				$('#imgsmallslide'+oldi).removeClass('active').addClass('opa05 cursor_poiter',1000);	
				$('#imgbigslide'+oldi).animate({opacity:0},1000);
			}		
		}
		oldi=numberimg;
	}
	function rightclick(totalimg){
		if(oldi>=0 && oldi<=7){
			$('#imgsmallslide'+(oldi+1)).removeClass('opa05 cursor_poiter',1000).addClass('active');
			$('#imgbigslide'+(oldi+1)).css({display:'block'}).animate({opacity:1},1000);
			$('#imgsmallslide'+oldi).removeClass('active').addClass('opa05 cursor_poiter',1000);	
			$('#imgbigslide'+oldi).animate({opacity:0},1000);			
		}else if(oldi>=8 && oldi<=totalimg){
			$('#imgsmallslide'+(oldi+1)).removeClass('opa05 cursor_poiter',1000).addClass('active');
			$('#imgbigslide'+(oldi+1)).css({display:'block'}).animate({opacity:1},1000);
			$('#imgsmallslide'+oldi).removeClass('active').addClass('opa05 cursor_poiter',1000);	
			$('#imgbigslide'+oldi).animate({opacity:0},1000);	
			if(oldi>=totalimg-2) $('#rightclick').hide();
			$('#boximgsmall').animate({left:'-=92px'});	
			$('#leftclick').show();
		}
		oldi=oldi+1;	
	}
	function leftclick(totalimg){
		if(oldi<totalimg & oldi>totalimg-9){
			$('#imgsmallslide'+(oldi-1)).removeClass('opa05 cursor_poiter',1000).addClass('active');
			$('#imgbigslide'+(oldi-1)).css({display:'block'}).animate({opacity:1},1000);
			$('#imgsmallslide'+oldi).removeClass('active').addClass('opa05 cursor_poiter',1000);	
			$('#imgbigslide'+oldi).animate({opacity:0},1000);	
		}else if(oldi>=1 && oldi<=totalimg-9){
			$('#imgsmallslide'+(oldi-1)).removeClass('opa05 cursor_poiter',1000).addClass('active');
			$('#imgbigslide'+(oldi-1)).css({display:'block'}).animate({opacity:1},1000);
			$('#imgsmallslide'+oldi).removeClass('active').addClass('opa05 cursor_poiter',1000);	
			$('#imgbigslide'+oldi).animate({opacity:0},1000);	
			if(oldi<=1) $('#leftclick').hide();
			$('#boximgsmall').animate({left:'+=92px'});	
			$('#rightclick').show();
		}
		oldi=oldi-1;	
	}
</script>
<?php }?>
<div class="fl w660">
  <div class="item bder_d5 pdt6 pdb9 mgb12 mgt5">
    <form method="post">
      <div class="fl w136 pdl20">Date<br>
        <div class="fl w130">
          <input type="text" class="bder_d5 w130 datepicker pdt5 pdb3" value="<?php echo $from?>" id="datefrom">
        </div>
      </div>
      <div class="fl w144"> Adult<br>
        <select id="adult" class="bder_d5 w130 gray pdt3 pdb3">
          <option value="0">00</option>
          <option value="1">01</option>
          <option value="2">02</option>
          <option value="3">03</option>
          <option value="4">04</option>
          <option value="5">05</option>
          <option value="6">06</option>
          <option value="7">07</option>
          <option value="8">08</option>
          <option value="9">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
        </select>
      </div>
      <div class="fl w130"> Children<br>
        <select id="child" class="bder_d5 w130 gray pdt3 pdb3">
          <option value="0">00</option>
          <option value="1">01</option>
          <option value="2">02</option>
          <option value="3">03</option>
          <option value="4">04</option>
          <option value="5">05</option>
          <option value="6">06</option>
          <option value="7">07</option>
          <option value="8">08</option>
          <option value="9">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
        </select>
      </div>
      <input type="button" class="bder0 fr ff_museo500 bgr_143167 white pdl6 pdt4 pdb4 pdr6 mgt9 mgr20 cursor_poiter" value="BOOK" onclick="return check_book();">
    </form>
    <script>
		$('#adult').click(function(){
			$(this).removeClass('bxshadow_ff0000');					   
		});
		$('#datefrom').on('change',function(){
			$(this).removeClass('bxshadow_ff0000');					   
		});
    	function check_book(){
			if($('#adult').val()==0){
				$('#adult').addClass('bxshadow_ff0000');
				return false;
			}if($('#datefrom').val()==0){
				$('#datefrom').addClass('bxshadow_ff0000');
				return false;
			}else{
				DetailPackage('<?php echo $idpackage; ?>',$("#datefrom").val(),$('#adult').val(),$('#child').val());
			}
		}
    </script>
  </div>
  <div class="item bder_d5 f17 ff_museo700 bold txt_indent20 pdt6 pdb7 mgb5 cursor_poiter" <?php if($data['overview']!=''){?>onclick="showhidebox('imgoverview','boxoverview');"<?php }?>> Overview<img width="16" height="10" class="fr pdr14 pdt3" id="imgoverview" src="<?php echo base_url();?>public/images/arrowup_07.jpg"> </div>
  <?php if($data['overview']!=null){ ?>
  <p class="pdl40 mgb20 fl" id="boxoverview"><?php echo $data['overview'] ?></p>
  <?php }?>
  <div class="item bder_d5 f17 ff_museo700 bold txt_indent20 pdt6 pdb7 mgb4 cursor_poiter" <?php if(count($data)>0){?>onclick="showhidebox('imgitinerary','boxitinerary');"<?php }?>> Itinerary<img width="16" height="10" class="fr pdr14 pdt3 mgt3 mgr14 tran_180deg" src="<?php echo base_url();?>public/images/arrowup_07.jpg"  id="imgitinerary"> </div>
  <?php if($data['itinerary']!=''){ ?>
  <div class="pdl40 mgb20 fl an" id="boxitinerary"><?php echo $data['itinerary'] ?></div>
  <?php }?>
  <div class="item bder_d5 f17 ff_museo700 bold txt_indent20 pdt6 pdb4 mgb4 cursor_poiter" <?php if($data['policy']!=''){?>onclick="showhidebox('imgpolicy','boxpolicy');"<?php }?>> Price & Policies<img width="16" height="10" class="fr pdr14 pdt3 mgt3 mgr14 tran_180deg" id="imgpolicy" src="<?php echo base_url();?>public/images/arrowup_07.jpg"> </div>
  <div class="fl w662 an pdb4" id="boxpolicy">
    <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="bder_d5 item mgb4 mgt15 mgb20">
      <tr class="bgr_143167 white">
        <th class="bder_d5 lheight23">High Season</th>
        <th class="bder_d5" colspan="8">From <?php echo date("d.m.Y",strtotime($listprice['datefrom'])) ?> to <?php echo date("d.m.Y",strtotime($listprice['dateto'])) ?></th>
      </tr>
      <tr class="bgr_grdt_orange white">
        <th class="bder_d5 lheight23">N.o of pax</th>
        <th class="bder_d5">1</th>
        <th class="bder_d5">2</th>
        <th class="bder_d5">3 to 4</th>
        <th class="bder_d5">5 to 8</th>
        <th class="bder_d5">9 to 12</th>
        <th class="bder_d5">13 to 16</th>
        <th class="bder_d5">Over 16</th>
        <th class="bder_d5">Single occupancy plus</th>
      </tr>
      <tr class="bgr_gray">
        <th class="bder_d5 lheight23">Price per pax (USD)</th>
        <th class="bder_d5"><?php echo $listprice['pricefor1'] ?></th>
        <th class="bder_d5"><?php echo $listprice['pricefor2'] ?></th>
        <th class="bder_d5"><?php echo $listprice['pricefor34'] ?></th>
        <th class="bder_d5"><?php echo $listprice['pricefor58'] ?></th>
        <th class="bder_d5"><?php echo $listprice['pricefor912'] ?></th>
        <th class="bder_d5"><?php echo $listprice['pricefor1316'] ?></th>
        <th class="bder_d5"><?php echo $listprice['pricefor16'] ?></th>
        <th class="bder_d5"><?php echo $listprice['singlerate'] ?></th>
      </tr>
    </table>
    <div class="item mgb20"><?php echo $data['policy'] ?> </div></div>
  <div class="item bder_d5 f17 ff_museo700 bold txt_indent20 pdt6 pdb7 mgb4 cursor_poiter" <?php if($data['guestreview']!=''){?>onClick="showhidebox('imgguestreview','boxguestreview');"<?php }?>> Guest's review<img width="16" height="10" class="fr pdr14 pdt3 mgt3 mgr14 tran_180deg" id="imgguestreview" src="<?php echo base_url();?>public/images/arrowup_07.jpg"> </div>
  <?php if($data['guestreview']!=''){ ?>
  <p class="pdl40 mgb20 fl an justify" id="boxguestreview"><?php echo $data['guestreview'] ?></p>
  <?php }?>
  <?php $this->load->view("usercontrol/suggestions");?>
</div>
<div class="fr w193"> <img width="100%" class="fl mgt5" src="<?php echo base_url();?>public/images/rightbanner_03.png"> <img width="100%" class="fl mgt5" src="<?php echo base_url();?>public/images/rightbanner_03.png"> </div>
</div>
